<template>
	<view class="content">
		<view class="background">
			<view class="topBar">
				<view class="left_topBar">
					<up-icon name="calendar" label="签到" labelPos="right" color="white" labelColor="white" size="28"
						@click="skipList('/pages/qiandao/qiandao')"></up-icon>
				</view>
				<view class="right_topBar">
					<up-icon name="setting" color="white" size="28"></up-icon>
					<up-icon name="email" color="white" size="28"></up-icon>
				</view>
			</view>

			<view class="card_me">
				<view class="users">
					<template v-if="!userInfo.avatarUrl">
						<image class="avatar" src="/static/logo.png" mode="aspectFill"></image>
						<view class="nickName">注册/登录</view>
					</template>
					<template v-else>
						<image class="avatar" :src="userInfo.avatarUrl" mode="aspectFill"></image>
						<view class="nickName">
							{{userInfo.nickName}}
						</view>
					</template>
				</view>
				<view class="card_list">
					<view class="list_item" v-for="(item,index) in data.list1" :key="index">
						<view class="number">
							{{item.count}}
						</view>
						<view class="item">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 功能列表 -->
		<view class="item_list">
			<view class="lists">
				<uni-list>
					<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" showArrow title="修改密码"
						:clickable="true" @click="skipList('/pages/password/password')"></uni-list-item>
					<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon2" showArrow title="我的购物车"
						:clickable="true"></uni-list-item>
					<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon3" showArrow title="用户反馈"
						:clickable="true"></uni-list-item>
					<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon5" showArrow title="分享有礼"
						:clickable="true"></uni-list-item>
					<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon7" showArrow title="用户协议"
						:clickable="true" @click="skipList('/pages/userAgreement/userAgreement')"></uni-list-item>
				</uni-list>
			</view>
		</view>
		<view class="logout">
			<button @click="handleGet">{{data.status?'切换账号':'登录账号'}}</button>
		</view>
	</view>
</template>
<script setup>
	import {
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getUserLike,
		getUserCollect,
		getUserDetail
	} from '../../api/api.js'
	// ----------------------------------------------------
	const data = reactive({
		list1: [{
				title: "点赞",
				count: 0
			},
			{
				title: "文章",
				count: 0
			},
			{
				title: "收藏",
				count: 0
			}
		],
		status: false, // 登录状态
	})
	// 用户信息
	const userInfo = reactive({
		nickName: '',
		avatarUrl: ''
	})

	const extraIcon1 = reactive({
		color: '#666666',
		size: '22',
		type: 'auth'
	})
	const extraIcon2 = reactive({
		color: '#666666',
		size: '22',
		type: 'cart'
	})
	const extraIcon3 = reactive({
		color: '#666666',
		size: '22',
		type: 'chatboxes'
	})
	const extraIcon5 = reactive({
		color: '#666666',
		size: '22',
		type: 'gift'
	})
	const extraIcon7 = reactive({
		color: '#666666',
		size: '22',
		type: 'compose'
	})

	// 先判断用户的登录状态，实现免登录逻辑
	onShow(() => {
		console.log("进入我的页面");
		// 如果token存在和用户信息不存在的情况下
		if (uni.getStorageSync('token')) {
			// 用户详情数据
			getUserDetail({}).then(res => {
				console.log(res);
				userInfo.avatarUrl = res.user.avatar
				userInfo.nickName = res.user.nickname
				data.list1[1].count = res.pagination.total
				if (res.user) {
					data.status = true // 已经登录
				}
			})
			// 用户收藏数据
			getUserCollect({}).then(res => {
				console.log(res, '用户收藏数据');
				data.list1[2].count = res.pagination.total
			})
			// 用户点赞数据
			getUserLike({}).then(res => {
				console.log(res, '用户点赞数据');
				data.list1[0].count = res.pagination.total
			})
		}
	})
	const skipLogin = (message) => {
		uni.showModal({
			title: "温馨提示",
			content: message,
			success(res) {
				if (res.confirm) {
					uni.navigateTo({
						url: '/pages/login/login',
						success: res => {
							uni.showToast({
								title: '跳转成功',
								icon: 'none'
							})
							uni.removeStorageSync("token")
						},
						fail: () => {
							uni.showToast({
								title: '跳转失败',
								icon: 'none'
							})
						}
					});
				}
			}
		})
	}
	// 点击登录注册
	const handleGet = () => {
		if (!data.status) {
			skipLogin("您确定要登录吗")
		} else {
			skipLogin("你确定要切换账号吗？")
		}
	}
	// 跳转列表页
	const skipList = (path) => {
		uni.navigateTo({
			url: path
		})
	}
</script>
<style>
	page {
		background-color: #f4f4f4;
	}
</style>
<style lang="scss" scoped>
	.content {
		height: 100vh;

		.background {
			height: 360rpx;
			background-color: #ef5478;
			border-radius: 0 0 30rpx 30rpx;
			position: relative;

			.topBar {
				padding: 0 8rpx;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.right_topBar {
					width: 120rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}

			.card_me {
				width: 90%;
				border-radius: 5%;
				height: 300rpx;
				background-color: white;
				position: absolute;
				margin-top: 20rpx;
				left: 5%;
				padding: 10rpx;
				box-shadow: 1px 10rpx 20rpx #ececec;

				.users {
					height: 130rpx;
					display: flex;
					align-items: center;
					margin: 30rpx;

					.avatar {
						width: 130rpx;
						height: 130rpx;
						border-radius: 50%;
					}

					.nickName {
						margin-left: 20rpx;
						font-size: 35rpx;
						font-weight: bold;
					}
				}

				.card_list {
					height: 150rpx;
					display: flex;
					justify-content: space-evenly;

					.list_item {
						width: 100rpx;
						height: 100rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-around;

						.item {
							font-size: 25rpx;
							color: #b3b6b4;
						}

						.number {
							font-size: 35rpx;
							font-weight: bold;
						}
					}
				}
			}
		}


		.item_list {
			margin-top: 100rpx;
			padding: 20rpx;

			.lists {
				height: 200rpx;
			}
		}

		.logout {
			position: absolute;
			bottom: 10rpx;
			left: 0rpx;
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			button {
				width: 70%;
				height: 80rpx;
				background-color: #ef5478;
				color: #f5f5f5;
				font-size: 35rpx;
				font-weight: bold;
			}
		}
	}
</style>